<template>
  <div class="pages fullreductionaadd" id="app">
    <div class="pageLevel">
      <div class="head-box">
        <el-steps :active="active">
          <el-step title="基本信息" description=" "></el-step>
          <el-step title="发放使用" description=" "></el-step>
          <el-step title="券面信息" description=" "></el-step>
        </el-steps>
      </div>
      <div class="content">
        <div class="from_main infon">
          <div class="infon_text">
            <span class="infon_shu"></span>
            <span class="infon_text_t">{{ message[active] }}</span>
          </div>
        </div>
        <div class="content-form" v-if="active == 1">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="优惠券标题:" prop="name">
              <el-input v-model="ruleForm.name" size="mini" maxlength="20"></el-input>
              <span style="color: #c0c4cc;">建议主标题提示券适用的地域。例如:仅限北京的门店参加</span>
            </el-form-item>
            <el-form-item label="优惠券副标题:">
              <el-input v-model="ruleForm.region" size="mini" maxlength="19"></el-input>
              <span style="color: #c0c4cc;">建议副标题提示券适用的品类。例如：仅限奶粉品类参加</span>
            </el-form-item>
            <el-form-item label="优惠类型" prop="resource">
              <el-radio v-model="ruleForm.resource" label="0">体验券</el-radio>
            </el-form-item>
            <el-form-item label="体验券金额" prop="rate1">
              <el-input v-model="ruleForm.rate1" size="mini" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item prop="validDay" class="newRowtwo" label="有效期" style="font-weight:700">
              <el-radio @change="validTill" label="0" v-model="ruleForm.radios">按固定天数设置</el-radio>
              <span>领取后</span>
              <el-input
                :disabled="ruleForm.adate"
                size="small"
                style="width:100px"
                v-model="ruleForm.validDay"
                placeholder="单位为天"
              ></el-input>
              <span>天内有效</span>
            </el-form-item>
            <el-form-item prop="dates" class="newRowtwo" label style="font-weight:700">
              <div class="timeDate">
                <el-radio @change="validTill" label="1" v-model="ruleForm.radios">按日期设置</el-radio>
                <el-date-picker
                  format="yyyy-MM-dd"
                  v-model="ruleForm.value6"
                  :disabled="!ruleForm.adate"
                  size="small"
                  value-format="yyyy-MM-dd"
                  unlink-panels
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  clearable
                ></el-date-picker>

                <div class="content-spans">
                  提示：选择第二种时，活动开始时间 >= (早于等于) 券的开始时间 且
                  活动结束时间 >= 券结束时间
                </div>
              </div>
            </el-form-item>
            <div class="tail">
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="content-form1" v-if="active == 2">
          <el-form
            :model="ruleFormUse"
            :rules="rules"
            ref="ruleFormUse"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="门店范围" prop="shopList">
              <el-col class="colLine" :span="20">
                <el-button
                  type="primary"
                  v-if="showAddshop"
                  size="mini"
                  @click="clickSelectStores()"
                >选择门店</el-button>
                <el-button
                  type="primary"
                  v-if="showAddshop"
                  size="mini"
                  @click="deletmoreStore()"
                  plain
                >批量删除</el-button>

                <el-table
                  max-height="250"
                  ref="multipleTable"
                  :data="ruleFormUse.shopList"
                  @selection-change="handleSelectionChange"
                  style="width: 100%;margin-top:10px"
                >
                  <el-table-column type="selection" v-if="showAddshop" width="55"></el-table-column>
                  <el-table-column prop="name" align="center" label="门店名称"></el-table-column>
                  <el-table-column
                    prop="shopType"
                    align="center"
                    label="类型"
                    :formatter="shopTypeof"
                  ></el-table-column>
                  <el-table-column align="center" v-if="showAddshop" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        @click="deleteStore(scope.$index, ruleFormUse.shopList)"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-form-item>
            <el-form-item label="适用范围" prop="use1">
              <el-col class="colLine" :span="20">
                <el-form-item>
                  <el-button
                    @click="dialogTableVisible_serve = true"
                    size="mini"
                    type="primary"
                  >添加服务</el-button>
                </el-form-item>
                <el-table :data="Dataserve" border style="width: 100%;margin-top:10px">
                  <el-table-column prop="name" align="center" label="服务名称"></el-table-column>
                  <el-table-column prop="serviceTime" align="center" label="时长(分)"></el-table-column>
                  <el-table-column prop="price" align="center" label="价格(元)"></el-table-column>
                  <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        @click="handleCancel_serve(scope.$index)"
                        size="mini"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-form-item>
            <div class="tail">
              <el-form-item>
                <el-button @click="astep(0)">上一步</el-button>
                <el-button type="primary" @click="Radio()">下一步</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="content-form" v-if="active == 3">
          <el-form
            :model="ruleFormTicket"
            :rules="rules"
            ref="ruleFormTicket"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="优惠说明: " prop="explain">
              <el-input
                type="textarea"
                v-model="ruleFormTicket.explain"
                placeholder="优惠说明"
                :autosize="{ minRows: 6, maxRows: 4 }"
              ></el-input>
              <span class="wordNumber">{{ ruleFormTicket.explain.length }}/200</span>
            </el-form-item>
            <el-form-item label="使用须知: ">
              <el-input
                type="textarea"
                v-model="ruleFormTicket.use"
                :autosize="{ minRows: 8, maxRows: 4 }"
                placeholder="请说明使用限制如：参与门店（全部门店/指定门店/某区域门店）；参与商品（全部/品类/品牌）"
              ></el-input>
              <span class="wordNumber">{{ ruleFormTicket.use.length }}/2000</span>
            </el-form-item>
            <el-form-item>
              <el-button @click="astep(1)">上一步</el-button>
              <el-button type="primary" @click="submitFormwc('ruleFormTicket')">完成</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <!-- 服务选择弹出框 -->
    <el-dialog
      title="服务选择"
      class="addshopname"
      :visible.sync="dialogTableVisible_serve"
      :closeOnClickModal="false"
      :closeOnPressEscape="false"
      width="60%"
    >
      <i class="el-icon-close icon" @click="dialogTableVisible_serve = false"></i>
      <div class="operationBox tableSearch">
        <el-button size="mini" type="primary" @click="save_serve">选择</el-button>
        <el-button size="mini" @click="dialogTableVisible_serve = false">取消</el-button>
      </div>
      <div class="tableSearch tableSearchs">
        <!-- <i class="el-input__icon el-icon-search" @click="searchSelectCang"></i> -->
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item label label-width="15px">
            <el-input class="input" v-model="keywordCang" size="small" placeholder="输入服务名称"></el-input>
          </el-form-item>
          <el-form-item label label-width="10px">
            <el-button type="primary" @click="searchSelectCang()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="cangArray"
        border
        ref="multipleTable"
        highlight-current-row
        @current-change="changeFun_serve"
      >
        <!-- <el-table-column type="selection" width="50"></el-table-column> -->
        <el-table-column prop="name" align="center" label="服务名称"></el-table-column>
        <el-table-column prop="serviceTime" align="center" label="时长(分)"></el-table-column>
        <el-table-column prop="price" align="center" label="价格(元)"></el-table-column>
        <!-- <el-table-column prop="state" align="center" :formatter="states" label="状态"></el-table-column> -->
      </el-table>
      <page-unit :pageData="pageDataService" :func="getCang"></page-unit>
    </el-dialog>

    <!-- 选择门店弹出窗 -->
    <el-dialog
      title="选择门店"
      :visible.sync="dialogStore"
      :closeOnClickModal="false"
      :closeOnPressEscape="false"
    >
      <div class="tableSearch">
        <el-form size="mini" label-width="50px">
          <el-row>
            <el-form-item>
              <el-input v-model="selectData.storeName" placeholder="请输入门店名称"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-select v-model="selectData.storeType" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label label-width="10px">
              <el-button type="primary" @click="searchStore()">查询</el-button>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label label-width="10px">
              <el-button type="primary" @click="confirmSelectStore()">选择</el-button>
            </el-form-item>
            <el-form-item label label-width="10px">
              <el-button @click="dialogStore = false">取消</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <el-table
        :data="tableDataDialogStore"
        height="300"
        ref="multipleTableStore"
        tooltip-effect="dark"
        highlight-current-row
        @selection-change="selectStore"
        :row-key="getRowKeysStore"
      >
        <el-table-column type="selection" width="50" :reserve-selection="true"></el-table-column>
        <el-table-column prop="name" label="门店名称" align="center"></el-table-column>
        <el-table-column prop="shopType" :formatter="shopTypeof" align="center" label="类型"></el-table-column>
      </el-table>
      <page-unit :pageData="pageDataStore" :func="getStore"></page-unit>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import sdInput from "@/components/SdInput";
import pageUnit from "@/components/Page";
import {
  findGoodsListPage,
  serviceListPage,
  timesCardListPage,
  saveOrUpdateMarketTicket,
  getMarketTicketDetail,
  selectBaseShopPageList,
  getGoodsClassifyTreeList,
  getGoodsLabelListByShopId
} from "@/api";
import util from "@/util";
import state from "@/util/state";
export default {
  components: { sdInput, pageUnit },
  computed: {
    ...mapState({
      merchantId: state => state.merchantId,
      userInfo: state => state.userInfo,
      pageLevel: state => state.pageLevel,
      linkName: state => state.linkName,
      shopType: state => state.shopType,
      isShop: state => state.isShop,
      companyName: state => state.companyName
    })
  },
  data() {
    return {
      id: "",
      editType: "",
      //   states: states,
      saleStatusArray: [],
      commodityBrandList: [],
      commodityClassification: "",
      commodBrand: "",
      active: 1,
      message: ["", "基本信息", "发放使用", "券面信息"],
      dialogTableVisible_card: false,
      tableData: [],
      selection_card: [],
      keywordcard: "",
      total: 0,
      pageSize: 20,
      totalItems: 0,
      currentPage: 1,
      dialogTableVisible_serve: false,
      cangArray: [],
      Dataserve: [],
      selection_serve: [],
      keywordCang: "",
      pageSize_serve: 20,
      currentpage_serve: 1,
      total_serve: 0,
      dialogTableVisible_good: false,
      goodArray: [],
      selection_good: [],
      //商品分页
      Datagodds: [],
      keyword: "",
      pageSize_good: 20,
      currentpage_good: 1,
      total_good: 0,
      ruleForm: {
        validDay: "",
        adate: false,
        value6: [],
        name: "",
        rate: "",
        rate1: "",
        region: "",
        resource: "0",
        radios: "0"
      },
      ruleFormUse: {
        commod: "",
        commodAdd: false,
        serve: "",
        serveAdd: false,
        card: "",
        cardAdd: false,
        shopList: [],
        rangeList: [
          {
            check: false, //是否选择商品
            applyType: "0", //适用类型：0-商品，1-服务，2-次卡
            joinType: "", //参与类型：0-全部参与，1-指定，2-按品牌和分类
            isUse: "", //选择范围是否可用：0-是，1-否
            joinBoolean: false,
            commodBrand: [], //商品品牌
            classi: [], //商品分类
            goodsList: [
              // {
              //   //指定集合
              //   goodsId: "", //商品ID 或 服务Id 或 次卡Id
              //   goodsName: "", //商品名称 或 服务名称 或 次卡名称
              //   goodsType: "", //商品类型：0-商品，1-服务，2-次卡
              //   price: "" //价格
              // }
            ],
            conditionList: [
              // //按品牌和分类集合
              // {
              //   conditionId: "", //品牌Id 或 分类id
              //   conditionType: "" //商品属性：0-品牌，1-分类
              // }
            ]
          },
          {
            check: false, //是否选择服务
            applyType: "1", //适用类型：0-商品，1-服务，2-次卡
            joinType: "1", //参与类型：0-全部参与，1-指定，
            joinBoolean: false,
            isUse: "0", //选择范围是否可用：0-是，1-否
            goodsList: [
              //   {
              //     //指定集合
              //     goodsId: "", //商品ID 或 服务Id 或 次卡Id
              //     goodsName: "", //商品名称 或 服务名称 或 次卡名称
              //     goodsType: "", //商品类型：0-商品，1-服务，2-次卡
              //     price: "" //价格
              //   }
            ],
            conditionList: [
              // //按品牌和分类集合
              // {
              //   conditionId: "", //品牌Id 或 分类id
              //   conditionType: "" //商品属性：0-品牌，1-分类
              // }
            ]
          },
          {
            check: false, //是否选择次卡
            applyType: "2", //适用类型：0-商品，1-服务，2-次卡
            joinType: "", //参与类型：0-全部参与，1-指定，2-按品牌和分类
            // isUse: "", //选择范围是否可用：0-是，1-否
            goodsList: [
              // {
              //   //指定集合
              //   goodsId: "", //商品ID 或 服务Id 或 次卡Id
              //   goodsName: "", //商品名称 或 服务名称 或 次卡名称
              //   goodsType: "", //商品类型：0-商品，1-服务，2-次卡
              //   price: "" //价格
              // }
            ],
            conditionList: [
              // //按品牌和分类集合
              // {
              //   conditionId: "", //品牌Id 或 分类id
              //   conditionType: "" //商品属性：0-品牌，1-分类
              // }
            ]
          }
        ]
      },
      ruleFormTicket: {
        explain: "",
        use: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入优惠券标题", trigger: "blur" },
          { max: 20, message: "长度在20个字符之内", trigger: "blur" }
        ],
        region: [{ max: 19, message: "长度最多 19 个字符", trigger: "blur" }],
        rate: [
          { required: true, message: "请设置满多少元可使用", trigger: "change" }
        ],
        rate1: [
          { required: true, message: "请设置体验券金额", trigger: "change" },
          { validator: util.getMoneyf, trigger: "blur" }
        ],
        radios: [
          { required: true, message: "请设置有效期", trigger: "change" }
        ],
        explain: [
          { required: true, message: "请输入优惠说明", trigger: "blur" },
          { max: 200, message: "长度在200个字符之内", trigger: "blur" }
        ],
        use: [{ max: 2000, message: "长度在2000个字符之内", trigger: "blur" }],
        shopList: [{ required: true, message: "请选择门店范围" }],
        use1: [{ required: true, message: " " }]

        // validDay: [{ validator: validateParkingLots, trigger: "blur" }]
      },
      pageDataStore: {
        pageSize: 5,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      },
      pageDataService: {
        pageSize: 5,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      },
      shopTypeof: state.shopType,
      selectData: {
        storeName: "", // 门店名称
        storeType: "", // 门店类型
        ticketName: ""
      },
      tableDataDialogStore: [], // 弹窗门店数组
      getRowKeysStore(row) {
        return row.id;
      },
      mutableStore: [], // 多选选择门店存入的数组
      options: [
        // 门店类型
        { value: "", label: "全部" },
        { value: "0", label: "直营店" },
        { value: "1", label: "加盟店" }
      ],
      dialogStore: false, // 门店弹窗
      showAddshop: true
    };
  },
  created() {
    this.id = util.getQuery().id;
    this.editType = util.getQuery().type;
  },
  mounted() {
    if (this.id != "" && this.id != null && this.id != undefined) {
      this.detail();
    }
    if (this.isShop == 0) {
      let storerow = {
        id: this.merchantId,
        name: this.companyName,
        shopType: this.shopType
      };
      this.showAddshop = false;
      this.ruleFormUse.shopList = [storerow];
    }
    this.getCang(this.pageDataService.pageSize, 1);
  },
  methods: {
    reset() {
      //重置
      this.commodBrand = "";
      this.keyword = "";
      this.commodityClassification = "";
    },
    added() {
      let scope = [];
      this.ruleFormUse.rangeList.forEach((i, index) => {
        i.goodsList = [];
        let a = {
          goodsId: "",
          goodsName: "",
          goodsType: "",
          price: ""
        };
        if (i.applyType == 1) {
          // if (i.joinType == 1) {
          this.Dataserve.forEach(ele => {
            a.goodsId = ele.id;
            a.goodsName = ele.name;
            a.price = ele.price;
            a.goodsType = 1;
            i.goodsList.push(a);
          });
          // }
          scope.push(i);
        }
      });
      let data = {
        orgId: this.merchantId,
        ticketName: this.ruleForm.name,
        ticketSubName: this.ruleForm.region,
        ticketType: this.ruleForm.resource,
        ticketAmount: this.ruleForm.rate1,
        limitAmount: this.ruleForm.rate,
        validType: this.ruleForm.radios,
        validDay: this.ruleForm.validDay,
        // startDate: this.ruleForm.value6[0],
        // endDate: this.ruleForm.value6[1]+' '+'23:59:59',
        ticketDesc: this.ruleFormTicket.explain,
        useInstructions: this.ruleFormTicket.use,
        rangeList: scope,
        shopList: this.ruleFormUse.shopList
      };
      if (this.ruleForm.radios == 1) {
        data.startDate = this.ruleForm.value6[0];
        data.endDate = this.ruleForm.value6[1] + " " + "23:59:59";
      }
      if (this.linkName !== "" || this.linkName !== null) {
        data.creator = this.linkName; //活动创建人
      } else {
        data.creator = this.userInfo.mobile; //活动创建人
      }
      if (this.id != "") {
        data.id = this.id;
      }
      saveOrUpdateMarketTicket(data).then(res => {
        this.$message({
          type: "success",
          message: "新增成功!"
        });
        history.back();
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.cikalist(this.pageSize, 1);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.cikalist(this.pageSize, this.currentPage);
    },
    //删除服务
    handleCancel_serve(index) {
      this.Dataserve.splice(index, 1);
    },
    changeFun_serve(val) {
      this.selection_serve = val;
    },
    save_serve() {
      if (this.selection_serve == "") {
        this.$message({
          type: "error",
          message: "请先选择服务!"
        });
      } else {
        this.Dataserve = [];
        this.Dataserve.push(this.selection_serve);
        this.dialogTableVisible_serve = false;
      }
    },
    searchSelectCang() {
      this.pageDataService.currentPage = 1;
      this.getCang(
        this.pageDataService.pageSize,
        this.pageDataService.currentPage
      );
    },
    getCang(pageSize, pageNum) {
      let data = {
        keyword: "",
        pageSize: pageSize,
        companyId: this.merchantId,
        keyword: this.keywordCang,
        status: 0,
        pageNum: pageNum
      };
      serviceListPage(data).then(res => {
        this.cangArray = res.data.list;
        this.pageDataService.totalItems = res.data.totalRecord;
      });
    },
    validTill() {
      if (this.ruleForm.radios == "0") {
        this.$delete(this.ruleForm, "adate");
        this.$set(this.ruleForm, "adate", false);
        this.$set(this.ruleForm, "value6", []);
      } else {
        this.$delete(this.ruleForm, "adate");
        this.$set(this.ruleForm, "adate", true);
        this.$set(this.ruleForm, "validDay", "");
      }
    },
    submitFormwc(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.added();
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    Radio() {
      if (this.ruleFormUse.shopList.length == 0) {
        this.$message({
          type: "error",
          message: "请选择门店范围！"
        });
      } else {
        if (this.Dataserve.length == 0) {
          this.$message({
            type: "error",
            message: "请选择适用服务！"
          });
        } else {
          if (Number(this.Dataserve[0].price) < Number(this.ruleForm.rate1)) {
            this.$message({
              type: "error",
              message: "体验券价格不能大于或等于服务价格"
            });
          } else {
            this.active = this.active + 1;
          }
        }
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // if (Number(this.Dataserve[0].price) <= Number(this.ruleForm.rate1)) {
          //   this.$message({
          //     type: "error",
          //     message: "体验券价格不能大于服务价格"
          //   });
          // } else {
          if (
            this.ruleForm.validDay == "" &&
            this.ruleForm.value6.length == 0
          ) {
            this.$message({
              type: "error",
              message: "请选择有效期！"
            });
          } else {
            if (this.ruleForm.radios == 1) {
              let now = new Date().getTime();
              let endTime = new Date(
                this.ruleForm.value6[1] + " " + "23:59:59"
              ).getTime();
              if (now >= endTime) {
                this.$message({
                  type: "error",
                  message: "请选择有效时间范围！"
                });
              } else {
                this.active = this.active + 1;
              }
            } else {
              this.active = this.active + 1;
            }
          }
          // }
        } else {
          return false;
        }
      });
    },
    astep(row) {
      if (row == 1) {
        this.$refs.ruleFormTicket.clearValidate();
      }
      this.active = this.active - 1;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    detail() {
      let datas = {
        id: this.id
      };
      getMarketTicketDetail(datas).then(res => {
        if (res.code == 200 && this.editType == "copy") {
          this.id = "";
        }
        let Data = res.data;
        this.ruleForm.name = Data.ticketName;
        this.ruleForm.region = Data.ticketSubName;
        this.ruleForm.resource = Data.ticketType.toString();
        this.ruleForm.rate1 = Data.ticketAmount;
        this.ruleForm.rate = Data.limitAmount;
        this.ruleForm.radios = Data.validType.toString();
        this.ruleForm.validDay = Data.validDay;
        this.ruleFormTicket.explain = Data.ticketDesc;
        this.ruleFormTicket.use = Data.useInstructions;
        this.ruleFormUse.shopList = Data.shopList;
        if (Data.startDate != null) {
          this.ruleForm.value6 = [
            util.foryear(Data.startDate),
            util.foryear(Data.endDate)
          ];
        }
        if (Data.serviceList[0].joinType != null) {
          this.ruleFormUse.rangeList[1].check = true;
          if (Data.serviceList[0].joinType == 0) {
            this.ruleFormUse.rangeList[1].joinType = "0";
            this.ruleFormUse.rangeList[1].joinBoolean =
              Data.serviceList[1].isUse == 0
                ? false
                : Data.serviceList[0].isUse == 1
                ? true
                : "";
          } else if (Data.serviceList[0].joinType == 1) {
            this.ruleFormUse.rangeList[1].joinType = "1";
            this.Dataserve = Data.serviceList[0].list;
            this.ruleFormUse.rangeList[1].joinBoolean =
              Data.serviceList[0].isUse == 0
                ? false
                : Data.serviceList[0].isUse == 1
                ? true
                : "";
          }
        }
        this.validTill(); //有效期
      });
    },
    // -------------------------------门店-------------------
    // 点击选择门店
    clickSelectStores() {
      this.getStore(
        this.pageDataStore.pageSize,
        this.pageDataStore.currentPage
      );
      this.dialogStore = true;
    },
    // 弹窗里确定选择门店弹窗
    confirmSelectStore() {
      this.memorydelet(
        this.ruleFormUse.shopList,
        this.tableDataDialogStore,
        this.mutableStore
      );
      if (
        this.ruleFormUse.shopList.length === 0 &&
        this.mutableStore.length == 0
      ) {
        this.$message.error("请先选择门店");
        return false;
      }

      this.ruleFormUse.shopList = this.ruleFormUse.shopList.concat(
        this.mutableStore
      );
      for (let i = 0; i < this.ruleFormUse.shopList.length - 1; i++) {
        for (let j = i + 1; j < this.ruleFormUse.shopList.length; j++) {
          if (
            this.ruleFormUse.shopList[i].id == this.ruleFormUse.shopList[j].id
          ) {
            this.ruleFormUse.shopList.splice(j, 1);
          }
        }
      }
      this.$refs.multipleTableStore.clearSelection();

      this.dialogStore = false;
    },
    // 弹窗门店里面的查询
    searchStore() {
      this.pageDataStore.currentPage = 1;
      this.getStore(
        this.pageDataStore.pageSize,
        this.pageDataStore.currentPage
      );
    },
    //查询门店
    getStore(pageSize, pageNum) {
      this.tableDataDialogStore = [];
      let data = {
        nameOrCode: this.selectData.storeName,
        shopType: this.selectData.storeType,
        pageNum: pageNum,
        pageSize: pageSize,
        openAccount: "", // 是否开户，0-否，1-是
        businessId: this.merchantId,
        type: 3 //1供应商（查找客户） 2-客户（查找供应商） 3-连锁（查客户）
      };
      selectBaseShopPageList(data).then(res => {
        if (res.code == 200) {
          this.tableDataDialogStore = res.data.list;
          this.pageDataStore.totalItems = res.data.pageTotal;
          this.memoryChecked(
            this.tableDataDialogStore,
            this.ruleFormUse.shopList,
            this.$refs.multipleTableStore
          );
        }
      });
    },
    // 弹窗中门店多选
    selectStore(val) {
      this.mutableStore = val;
    },
    //门店批量多选
    handleSelectionChange(val) {
      this.multipleTable = val;
    },
    // 门店批量多选删除
    deletmoreStore() {
      this.multipleTable.forEach(ele => {
        this.ruleFormUse.shopList.forEach((i, index) => {
          if (ele.id == i.id) {
            this.ruleFormUse.shopList.splice(index, 1);
          }
        });
      });
      this.ruleFormUse.shopList;
    },
    //门店删除
    deleteStore(index, rows) {
      rows.splice(index, 1);
    },
    // -------------------------------门店end-------------------

    //记忆函数
    memoryChecked(dialogArr, checkArr, refarr) {
      dialogArr.forEach((row, index) => {
        let check = false;
        checkArr.forEach(ele => {
          if (row.id == ele.id) {
            check = true;
          }
        });
        if (check) {
          refarr.toggleRowSelection(row, true);
        }
      });
    }, //
    //  回显
    memorydelet(checkArr, dialogArr, refarr) {
      let deletearr = []; //弹窗当前页中曾经选过的行
      checkArr.forEach(ele => {
        dialogArr.forEach(row => {
          if (ele.id == row.id) {
            deletearr.push(ele);
          }
        });
      });
      deletearr.forEach(row => {
        let bool = false;
        refarr.forEach(i => {
          if (i.id == row.id) {
            bool = true;
          }
        });
        if (bool == false) {
          checkArr.forEach((ele, index) => {
            if (row.id == ele.id) {
              checkArr.splice(index, 1);
            }
          });
        }
      });
    }
  }
};
</script>
<style scoped>
#app {
  text-align: left;
}
.head-box {
  width: 70%;
  margin: 30px 0px 30px 200px;
}
.content {
  margin-left: 30px;
}
.content-form {
  width: 500px;
}
.content-form1 {
  width: 1000px;
}
.mjje {
  width: 500px;
  height: 60px;
  line-height: 60px;
  text-indent: 10px;
}
.mjje span {
  margin-left: 10px;
}
.mjje .el-input-group__append {
  width: 5px;
  padding: 0;
}
.tail {
  width: 800px;
  margin: 100px auto;
}
.tail .el-form-item {
  margin-left: 450px;
}
.content-span {
  margin: 30px 0 30px 200px;
  color: #c0c4cc;
}
.tableSearchs {
  position: relative;
}
.tableSearchs .el-input__icon {
  position: absolute;
  top: 12px;
  left: 190px;
  z-index: 10;
  width: 25px;
  height: 35px;
}
.content-spans {
  margin-top: 60px;
  width: 700px;
  color: #c0c4cc;
}
.wordNumber {
  position: absolute;
  bottom: 0px;
  left: 348px;
  font-weight: normal;
  color: #ccc;
  font-size: 12px;
}
.smallItem {
  display: inline-block;
  padding: 10px 0;
}
.colLine {
  margin-bottom: 10px;
}
</style>
<style>
.Receive .el-form-item__error {
  top: 38px;
}
</style>
